<template>
  <main-wrap v-wechat-title="detail.title">
    <div slot="left">
      <div class="detail-wrap">
        <h2 class="detail-title">{{detail.title}}</h2>
        <div class="other-info">
          <span><i class="el-icon-user"></i> {{detail.author}}</span>
          <span><i class="el-icon-time"></i> {{detail.createTime}}</span>
          <span>分类：{{detail.classify}}</span>
          <span><i class="el-icon-view"></i> {{detail.view}}</span>
          <span><i class="el-icon-chat-dot-square"></i> {{detail.msgs}}</span>
        </div>
        <div
          v-highlight
          class="detail-content markdown-body"
          ref="article"
          id="article"
          v-html="detail.content"
        ></div>
      </div>

      <el-dialog
        :append-to-body="true"
        :visible.sync="isDialog"
        center
        class="hidden-sm-and-down"
        custom-class="img-dialog"
        width="90%">
        <img width="100%" :src="previewImg" alt="">
      </el-dialog>

      <div class="detail-wrap">
        <ul class="prev-next-wrap">
          <li>
            <div v-if="prevDetail">
              <span>上一篇：</span>
              <span class="prev" @click="updateDetail(prevDetail)">{{prevDetail.title}}</span>
            </div>
            <div v-if="!prevDetail&&nextDetail">已是第一篇文章！</div>
          </li>
          <li>
            <div v-if="nextDetail">
              <span>下一篇：</span>
              <span class="next" @click="updateDetail(nextDetail)">{{nextDetail.title}}</span>
            </div>
            <div v-else>已是最后一篇文章！</div>
          </li>
        </ul>
      </div>

      <comment :blogId="id"></comment>
    </div>

    <card-vue title="目录" slot="right" class="menu-wrap">
      <i class="el-icon-menu" slot="title-icon"></i>
      <div slot="body" class="notice">
        <div
          class="menu-title ellipsis-line-1"
          v-for="item in articleToc"
          :key="item.id"
          :title="item.text"
          :style="{paddingLeft: `${item.indent*1.5}em`}"
          @click="scrollTo(item.id)"
        >{{item.text}}
        </div>
      </div>
    </card-vue>
  </main-wrap>
</template>

<script>
  import marked from 'marked';
  import buildToc from "../../assets/utils/buildToc";
  import {queryArticleDetail, queryArticlePrevAndNext} from "../../assets/api/getData";
  import {addLineAndCopy} from "../../assets/utils/lineAndCopy";

  export default {
    name: "detail",
    data() {
      return {
        id: null,
        detail: {},
        prevDetail: {},
        nextDetail: {},
        articleToc: [],
        isDialog: false,
        previewImg: "",
      }
    },
    mounted() {
      this.$nextTick(() => {
        let article = this.$refs.article;
        article.addEventListener('click', (event) => {
          let obj = event.target;
          let width = document.body.offsetWidth;
          if (width <= 991) {
            return false
          }
          if (obj.localName == "img") {
            this.previewImg = obj.src;
            this.isDialog = true;
          }
        }, false);
      })
    },
    created() {
      this.classify = this.$route.query.classify;
      this.id = JSON.parse(this.$route.query.id);
      this.getArticleDetail();
      this.getArticlePrevAndNext();
    },
    methods: {
      updateDetail(detail) {
        this.$router.push({
          name: 'detail',
          query: {classify: detail.classify, id: detail.id}
        });
        this.classify = this.$route.query.classify;
        this.id = this.$route.query.id;
        this.getArticleDetail();
        this.getArticlePrevAndNext();
      },
      async getArticleDetail() {
        try {
          const {data: detail} = await queryArticleDetail(this.id);
          this.detail = detail;
          let data = buildToc(marked(detail.content));
          this.detail.content = data.article;
          this.articleToc = data.toc;
          this.$nextTick(() => {
            addLineAndCopy();
          });
        } catch (err) {
          this.$message.error(err.msg);
        }
      },
      async getArticlePrevAndNext() {
        try {
          let res = await queryArticlePrevAndNext(this.classify, this.id);
          this.prevDetail = res.data.prev;
          this.nextDetail = res.data.next;
        } catch (err) {
          this.$message.error(err.msg);
        }
      },
      scrollTo(id) {
        // 绑定 toc 点击事件
        let node = document.querySelector('[data-id="' + id + '"]');
        if (!node) {
          return;
        }
        node.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "nearest"
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .detail-wrap {
    background-color: @color-white;
    border-radius: 4px;
    padding: 15px;
    border: 1px solid @color-border;
    margin-bottom: 20px;
  }

  .detail-title {
    text-align: center;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
  }

  .other-info {
    text-align: center;
    color: #999999;
    font-size: 12px;
    margin-bottom: 15px;

    span {
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .detail-content {
    border-top: 1px solid @color-border;
    padding: 15px 0;
    line-height: 1.8;
    word-wrap: break-word;
    overflow: hidden;
    text-indent: 30px;
  }

  .prev-next-wrap {
    margin-top: 15px;

    li {
      margin-bottom: 15px;

      .prev, .next {
        cursor: pointer;

        &:hover {
          color: @color-blue;
        }
      }
    }
  }

  .menu-wrap {
    position: sticky;
    top: 80px;
  }

  .menu-title {
    font-size: 14px;
    padding: 5px 0;
    color: @color-blue;
    cursor: pointer;
    line-height: 1.3;

    &:hover {
      text-decoration: underline;
    }
  }
</style>
